<template>
  <div>
    <div class="picker-item">
      <CloudDatePicker>
        <template slot="dateRender" slot-scope="current, today">
          <div class="ant-calendar-date" :style="getCurrentStyle(current, today)">
            {{ current.date() }}
          </div>
        </template>
      </CloudDatePicker>
    </div>
    <div class="picker-item">
      <CloudRangePicker>
        <template slot="dateRender" slot-scope="current">
          <div class="ant-calendar-date" :style="getCurrentStyle(current)">
            {{ current.date() }}
          </div>
        </template>
      </CloudRangePicker>
    </div>
    <div class="picker-item">
      <CloudWeekPicker>
        <template slot="dateRender" slot-scope="current">
          <div class="ant-calendar-date" :style="getCurrentStyle(current)">
            {{ current.date() }}
          </div>
        </template>
      </CloudWeekPicker>
    </div>
  </div>
</template>

<script>
  export default {
    title: '8.定制日期单元格 ',
    subTitle: '使用 dateRender 可以自定义日期单元格的内容和样式。',
    data () {
      return {
      }
    },
    methods: {
      getCurrentStyle (current, today) {
        const style = {};
        if (current.date() === 1) {
          style.border = '1px solid #1890ff';
          style.borderRadius = '50%';
        }
        return style;
      },
    }
  }
</script>

<style lang="scss">
</style>